<style>
    body {
        background: #ffffff;
    }
    .box,.info-box{
        border: 1px solid #ebebeb;
        box-shadow: 0px 0px 14px 0px rgba(76, 87, 125, 0.1);
        min-height: 71px!important;
        min-width: 180px;
    }
    .info-box-icon {
        height: 70px;
        width: 70px;
        font-size: 40px;
        line-height: 69px;
    }
    #box-bill div.fixed-table-toolbar{
        display: none;
    }
    #box-bill div tbody tr{
        cursor: pointer;
    }
    #box-bill span.pagination-info{
        display: none;
    }
    #box-bill tr td{
        border-left: none;
        border-right: none;
    }
    .box-title{
        font-size: 14px!important;
    }
    .box-header {
        background: #5a658b;
        color: white;
        padding: 6px;
    }
    .pagination{
        margin-right: 8px;
    }
    #table-bill td:first-child{
        width: 40px;
    }
    .row-active{
        border-left: 4px solid #3d73c9;
    }
    .card {
        border: 0;
        border-radius: 4px;
        box-shadow: 0px 0px 14px 0px rgba(76, 87, 125, 0.1);
        background: white;
    }
    .card-title{
        font-weight: 600;
        color: #929292;
    }
    .card .card-header {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
        background-color: transparent;
        border-bottom: 1px solid #EFF2F5;
        padding: 0 1rem;
    }
    .today-news .card-body {
        max-height: 620px;
        overflow: auto;
        padding: 2rem 1rem;
    }
    .bg-light-warning {
        background-color: #fff8e8;
    }
    .bg-light-success {
        background-color: #ecfff5;
    }
    .bg-light-danger {
        background-color: #fff7fa;
    }
    .bg-light-info {
        background-color: #edf4fc;
    }
    .text-gray-dark{
        color: #a7a7a7;
    }
    .message-row{
        border-radius: 0.675rem;
        padding: 1.25rem;
        margin-bottom: 12px;
    }
    .d-flex {
        display: flex !important;
    }
    .flex-grow-1 {
        flex-grow: 1;
    }
    div ::-webkit-scrollbar {
        /*滚动条整体*/
        width: 4px;
        height: 6px;
        border-radius: 5px;
    }
    div ::-webkit-scrollbar-track {
        /*滚动条轨道*/
        background: #e3e3e3;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        background: #d1d1d1;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
        background: #a8a8a8;
    }
    div ::-webkit-scrollbar-corner {
        /*滚动条边角*/
        background: #a8a8a8;
    }
    .content {
        padding: 15px;
    }
</style>

<div class="row">
    <div class="col-md-3">
        <div id="box-bill" class="box box-solid">
            <div class="box-header with-border">
                <span class="box-title"><i class="fa fa-list"></i> 单据列表</span>
                <div class="box-tools">
                    <span class="text-gray">点击筛选</span>
                </div>
            </div>
            <div class="box-body no-padding">
                <table id="table-bill" class="table table-striped table-bordered table-hover table-nowrap"
                       data-search="false"
                       data-show-header="false"
                       data-common-search="false"
                       data-show-toggle="false"
                       width="100%"
                ></table>
            </div>
        </div>
        <div class="card today-news">
            <div class="card-header border-0">
                <h5 class="card-title"><i class="fa fa-envelope"></i> 今日消息</h5>
            </div>
            <div class="card-body">
                {volist name='todayRows' id='row'}
                    <div class="message-row bg-light-{$row['bgColor']} d-flex">
                    <i class="fa fa-bell text-gray" style="margin: 0.45rem 0.45rem 0 0;"></i>
                    <div class="flex-grow-1">
                        <a class="today-carbon-jump" href="javascript:;" data-id="{$row['id']}" data-toggle="tooltip" data-placement="top" title="" data-original-title="点击筛选">新的抄送</a>
                        <span class="text-muted">来自 </span>
                        <span class="text-warning">{$row['sender']}</span>
                    </div>
                    <span class="text-gray-dark">{$row['sendtime']}</span>
                </div>
                {/volist}
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="fa fa-building-o"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">全部抄送</span>
                        <span class="info-box-number"><a href="javascript:;" class="btn-sm btn-info fastflow-all-btn"><label id="fastflow-all">0</label></a></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="fa fa-envelope"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">未查阅</span>
                        <span class="info-box-number"><a href="javascript:;" class="btn-sm btn-danger fastflow-unread-btn"><label id="fastflow-unread">0</label></a></span>
                    </div>
                </div>
            </div>

            <div class="clearfix visible-sm-block"></div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-folder-open"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">已查阅</span>
                        <span class="info-box-number"><a href="javascript:;" class="btn-sm btn-success fastflow-read-btn"><label id="fastflow-read">0</label></a></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="fa fa-file-text-o"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">今日抄送</span>
                        <span class="info-box-number"><a href="javascript:;" class="btn-sm btn-warning fastflow-today-btn" data-range="{$todayRange}"><label id="fastflow-read">{$todayCount}</label></a></span>
                    </div>
                </div>
            </div>
        </div>
        <div id="box-list" class="box box-solid">
            <div class="box-header" style="background: #525252;">
                <span class="box-title"><i class="fa fa-calendar-check-o"></i> 抄送清单</span>
            </div>
            <div class="box-body">
                <div id="toolbar-list" class="toolbar">
                    <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                    <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('fastflow/carbon/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                    <a href="javascript:;" class="btn btn-info-light btn-display-all" title="{:__('DisplayAll')}" ><i class="fa fa-list"></i> {:__('DisplayAll')}</a>
                </div>
                <table id="table-list" class="table table-bordered table-hover table-nowrap" width="100%">
                </table>
            </div>
        </div>
    </div>
</div>


